<script type="text/javascript">

var rowArray=new Array();
var currentRowItem = null;
var perviousRowItem = null;
var currentRowIndex = -1;
var offsetTop = 0;
var perviousStartTop = 0;
var currentStartTop = 100;
var animator = null;

</script>

<div id="topicalbum_table" style="margin-left:30px;position:relative; width:95%; height:250px; overflow:hidden;">
		<!--{eval $index=0; }-->
		<!--{eval $row=0; }-->
		
		<!--{loop $topic_album_list $key $value}-->
			<!--{if $index == 0}-->
				<div id="topicalbum_div_$row" style="width:100%;position:absolute;"><table width="100%" height="100%" border="0"><tr>
			<!--{/if}-->
					<td align="center" width="150px" align="center">
						<p style="border:1px solid #EBE6C9;">
							<a href="space.php?do=topic&topicid=$value[topicid]" title="$value[subject]" target="_blank">
								<img alt="$value[subject]" src="$value[picthumb]" width="150px" height="200px" class="picborder"/>
							</a>
						</p>
						<h3 style="clear:both;"><a href="space.php?do=topic&topicid=$value[topicid]" title="$value[subject]" target="_blank"><!--{eval echo getstr($value[subject], 22, 0, 0, 0, 0, -1); }--></a></h3>
						<!--{if empty($value[clubtagid])}-->
						<p class="gray">[&nbsp;<!--{eval echo getstr($value[club], 18, 0, 0, 0, 0, -1); }-->&nbsp;]</p>
						<!--{else}-->
						<a class="gray" href="space.php?do=mtag&tagid=$value[clubtagid]" target="_blank">[&nbsp;<!--{eval echo getstr($value[club], 18, 0, 0, 0, 0, -1); }-->&nbsp;]</a>
						<!--{/if}-->
					</td>
			<!--{eval $index=$index+1; }-->
			<!--{if $index >= 5}-->
				<script type="text/javascript">rowArray.push($('topicalbum_div_$row'));</script>
				<!--{eval $index=0; }-->
				<!--{eval $row=$row+1; }-->
				</tr></table></div>
			<!--{/if}-->
		<!--{/loop}-->
</div>
<script type="text/javascript">

function init(){
	offsetTop = getoffset($("topicalbum_table"))[0];
	for(var i = 0; i < rowArray.length; i++) {
		var rowItem = rowArray[i];
		rowItem.style.top = (offsetTop + 9999)+"px";
	}
}
function prepare(){
	if(currentRowIndex == -1){
		currentRowIndex = 0;
	}
	else if(currentRowIndex >= (rowArray.length - 1) ){
		currentRowIndex = 0;
	}
	else{
		currentRowIndex = currentRowIndex+1;
	}
	
	perviousRowItem = currentRowItem;
	
	for(var i = 0; i < rowArray.length; i++) {
		var rowItem = rowArray[i];
		if(rowItem.id == "topicalbum_div_"+currentRowIndex) {
			currentRowItem = rowItem;
			break;
		}
	}

	perviousStartTop = 0;
	currentStartTop = 160;
}

function move(){
	if(currentStartTop > 0 ){
		if(perviousRowItem != null){
			perviousStartTop = perviousStartTop - 5;
			perviousRowItem.style.top = perviousStartTop + "px";
		}
		currentStartTop = currentStartTop - 5;
		currentRowItem.style.top = currentStartTop + "px";
	}
	else{
		currentRowItem.style.top = (0)+"px";
		if(perviousRowItem!=null){
			perviousRowItem.style.top = (9999)+"px";
		}
		window.clearInterval(animator);
		animator = null;
	}
}

init();
execute();

function execute(){
	if( animator==null ){
		prepare();
		animator = window.setInterval(move, 5);
		setTimeout('execute()', 10000);
	}
	else{
		setTimeout('execute()', 1000);
	}
}


</script>
